<template>
  <div>
    <router-view v-slot="{ Component }">
      <keep-alive :include="['HomeView']">
        <component :is="Component" />
      </keep-alive>
    </router-view>


    <van-tabbar v-model="active" route placeholder v-if="tabbarShow">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" to="/category">分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" to="/cart" :badge="CartStore.CartTypeNum">
        购物车
      </van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { useCartStore } from '@/stores/cart'
let CartStore = useCartStore()

import { ref, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
let active = ref(0)
//底部tabbar根据路由变化是否显示
let route = useRoute()
let tabbarShow = ref(true) //控制底部tabbar是否显示
let tabbarList = ['/', '/cart', '/category', '/my'] //要显示的路由
//监测route.path值，判断route.path是否在显示数组中，根据结果改变tabbarShow的值
watchEffect(() => {
  if (tabbarList.includes(route.path)) {
    tabbarShow.value = true
  } else {
    tabbarShow.value = false
  }
})
</script>

<style scoped>
</style>
